<template>
  <van-nav-bar
      :title="title"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
  >
    <template #right>
      <van-icon name="search" size="18" />
    </template>
  </van-nav-bar>

  <div id="content">
    <router-view />
  </div>

  <van-tabbar route >
    <van-tabbar-item to="/" icon="home-o" name="index">主页</van-tabbar-item>
    <van-tabbar-item to="/team" icon="search" name="team">队伍</van-tabbar-item>
    <van-tabbar-item to="/user" icon="friends-o" name="user">个人</van-tabbar-item>
  </van-tabbar>

</template>

<script setup>

import 'vant/es/toast/style';
import { watchEffect,ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import routers from "../config/routers.ts"

// 使用正确的路由hook
const route = useRoute();
const router = useRouter();

const DEFAULT_TITLE = "伙伴匹配";
const title = ref(DEFAULT_TITLE);

// 响应式更新标题
watchEffect(() => {
  const matchedRoute = routers.find(r => {
    // 处理动态路由匹配
    const routePath = route.path;
    const configPath = r.path;

    // 简单路径匹配（如需完整动态路由支持需使用path-to-regexp）
    return configPath === routePath ||
        configPath.replace(/\/:\w+/g, '') === routePath.split('/').slice(0, -1).join('/');
  });

  title.value = matchedRoute?.title ?? DEFAULT_TITLE;
});

// 导航方法修正
const onClickLeft = () => {
  router.back();
};

const onClickRight = () => {
  router.push("/search");
};

</script>

<style scoped>
#content{
  padding-bottom: 50px;
}
</style>


